<%@ page import="com.hall.utils.UserSession" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://www.codecoord.com" %>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="viewport" content="width=device-width,user-scalable=no, initial-scale=1">
    <meta name="renderer" content="webkit">
    <title>查看结果</title>
    <script src="${pageContext.request.contextPath}/static/jquery/jquerymin.js"></script>
    <link href="${pageContext.request.contextPath}/static/layui-v2.6.8/layui/css/layui.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/layui-v2.6.8/layui/layui.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/vue/js/axios.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/live_meeting.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/case_show.css">
    <script src="${pageContext.request.contextPath}/static/jquery/jquery-1.11.0.js"></script>
    <script src="${pageContext.request.contextPath}/static/jquery/provinces.js"></script>


    <style>
        body {
            background: #F0F2F5;
        }

        #navbar-default {
            background-color: #71BD71;
        }

        select {
            width: 130px;
            height: 37px;
            text-align: center;
            text-align-last: center;
        }


        .new-form {
            width: 100%;
            height: 50px;
            /*background-color: #FE6219;*/
            color: white;
            /* 设置字体大小 */
            font-size: 20px;
            /* 设置字间距 */
            letter-spacing: 3px;
            /* 设置行高与盒子高度一致，实现垂直居中 */
            line-height: 50px;
            /* 设置水平居中 */
            text-align: center;
        }

        /* 设置表格 */
        table {
            /* 表格的宽度与top一样 */
            width: 100%;

            /* 设置表格边框 */
            border: 1px solid white;

        }

        /* 设置表头 */
        th {

            width: 60%;
            height: 45px;

            background-color: #FED68F;

            border: 0px;

            /* 合并相邻的边框 */
            border-collapse: collapse;

            /* 字体居中对齐 */
            text-align: center;

        }

        /* 设置表格中每一个单元格 */
        td {

            width: 60%;
            height: 45px;

            /* 设置无边框 */
            border: 0px;

            /* 字体水平居中 */
            text-align: center;

        }


        #td2 {
            width: 30%
        }

        #th2 {
            width: 30%
        }

        #td3 {
            width: 10%
        }

        #th3 {
            width: 10%
        }

        /* 设置排名为奇数的一行表格 */
        .odd {
            background-color: #FFF4E4;
            border-bottom: 6px solid #F0F2F5;
        }

        .page-header {
            margin-left: 15px;
        }


    </style>
</head>
<body>
<div id="header">
    <nav id="navbar-default" class="navbar navbar-default top-nabar" role="navigation"
         style="overflow:hidden;position:fixed;top:0;width:100%;z-index:1002;border: 0">
        <div class="row">
            <div class="container-fluid" id="fluid">
                <div class="col-lg-1 col-md-1 col-xs-1 col-sm-1" style=";padding-left: 6px;">
                    <a class="navbar-brand" href="javascript:history.back(-1)"
                       style="padding-left: 3px;">
                        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                    </a>
                </div>
            </div>
        </div>
    </nav>
    <br><br>


    <div class="container">
        <div class="row clearfix">
            <div class="col-md-12" column></div>
            <div class="page-header">
                <h1>
                    <small>查看预约结果</small>
                </h1>
            </div>
        </div>
    </div>

    <form class="layui-form" action="">
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: 100px">输入手机号</label>
            <div class="layui-input-block" id="topsearch">
                <input type="text" id="phone" lay-verify="title" name="keywords" placeholder="请输入手机号"
                       class="layui-input" maxlength="11"/>
            </div>
        </div>


        <div style="width: 100%; margin: 0">
            <button type="button" class="layui-btn layui-btn-fluid" onclick="gettell()">查看预约</button>
        </div>


        <%--       新增加的        --%>
        <div  style="display: none" id="one" class="new-form" lay-filter="test1">
            <div class="col-md-5" style="padding: 0 0;width: 100%">
                <from action="" method="post" name="Form" id="Form" class=" table-hover table-striped">
                    <table>
                        <thead>
                        <tr>
                            <th class="ying-pian">学术会议名称</th>
                            <th id="th2">预约结果</th>
                            <th id="th3">手机号</th>
                        </tr>
                        </thead>
                        <tbody id="trs">
                        <c:forEach var="LearningApply" items="${phone1}">
                            <tr class="odd">
                                <td>${LearningApply.useId}</td>
                                <td id="td2">${LearningApply.result}</td>
                                <td id="td3">${LearningApply.tell}</td>
                            </tr>
                            <input type="text" id="search" style="display: none" value="${LearningApply.tell}">
                        </c:forEach>
                        </tbody>
                    </table>
                </from>
            </div>
        </div>

</div>

</form>


</div>


<script>


    //输入手机号
    function gettell() {
        let form1 = new FormData();
        form1.append("phone", $("#phone").val())
        let reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;  //手机号匹配正则
        if ($("#phone").val() == null || $("#phone").val() == '') {
            layer.msg('手机不能为空');
            return false;
        }
        if (!reg_tel.test($("#phone").val())) {
            layer.msg('手机格式不正确');
            return false;
        }
        if ($("#phone").val().length < 11) {
            layer.msg('请输入11位手机号码');
        } else {
            axios({
                method: 'post',
                url: '${pageContext.request.contextPath}/learning/selectmeet',
            })

            //检索
            var keyword = document.getElementById("phone").value.toLowerCase().split(" ");
            var table = document.getElementById("trs");
            var ele;
            var arr = new Array();
            for (var r = 0; r < table.rows.length; r++) {
                ele = table.rows[r].innerHTML;
                var displayStyle = 'none';
                for (var i = 0; i < keyword.length; i++) {
                    if (keyword == "") {
                        displayStyle = "";
                        break;
                    }
                    if (ele.toLowerCase().indexOf(keyword[i]) > 0) {
                        displayStyle = '';
                    } else {
                        displayStyle = 'none';
                        break;
                    }
                }
                table.rows[r].style.display = displayStyle;
            }

            //隐藏div 显示div
            $("input[id^='search']").each(function () {
                var j = 0;
                for (let i = 0; i < arr.length; i++) {
                    if ($(this).val().indexOf(arr[i]) > -1) {
                        j += 1;
                    }
                }
                if (j == arr.length) {
                    $("#one").attr("style", "display:block;");//显⽰div
                } else {
                    $("#one").attr("style", "display:none;");//隐藏div
                }
            })
        }
    }
</script>
</body>


</html>
